<template>
	<view>
		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-if="messageList.length==0"></u-empty>
		<view class="top">
			<button class="allReadButton" @click="allReadHandle()">全部已读</button>
			<button class="deleteBatchButton" @click="deleteMessage()">删除已读</button>
		</view>
		<view class="message" v-for="(item,index) in messageList" :key="item.id">
			<view class="message_head">
				<view class="message_time">{{item.createTime}}</view>
				<view class="tag" v-if="!item.isRead">新增</view>
			</view>
			<view class="message_body">
				<image class="message_icon" :src="messageImgList[item.type - 1]"></image>
				<view class="message_info">
					<view class="message_title">
						{{item.title}}
					</view>
					<view class="message_content">
						{{item.content}}
					</view>
				</view>
				<view>
					<button class="navBtn" @click="navToPage(item)">查看</button>
					<button class="delBtn" @click="deleteMessage(item.id)">删除</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ids: [],
				messageList: [],
				messageImgList: ['https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/icon/order2.png', 
				'https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/icon/egg2.png']
			}
		},
		methods: {
			async getMessageList() {
				const res = await this.$myRequest({
					url: 'adoption/message/getUserMessageList'
				})
				if (res && res.code === 0) {
					this.messageList = res.data;
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},
			//阅读（批量）
			async updateIsRead(id) {
				if (id) {
					this.ids.push(id);
				}
				console.log(this.ids)
				if (this.ids.length > 0) {
					const res = await this.$myRequest({
						url: 'adoption/message/updateRead',
						method: 'put',
						data: this.ids
					})
					if (res && res.code === 0) {
						this.getMessageList()
						this.ids = [];
					}
				}
			},
			// 一键已读
			allReadHandle() {
				this.messageList.forEach(item => {
					if (!item.isRead) {
						this.ids.push(item.id)
					}
				})
				if (this.ids.length > 0) {
					const _this = this;
					uni.showModal({
						title: '确定要全部设置为已读吗？',
						showCancel: true,
						success(e) {
							if (e.confirm) {
								_this.updateIsRead()
							}
						}
					})
				} else {
					uni.showToast({
						title: '没有未读消息',
						icon: 'none'
					})
				}
			},
			// 删除/删除已读
			async deleteMessage(id) {
				const ids = [];
				console.log('id:' + id)
				if (id) {
					ids.push(id)
				} else {
					this.messageList.forEach(item => {
						if (item.isRead) {
							ids.push(item.id)
						}
					})
				}
				if (ids.length == 0) {
					return;
				}
				uni.showModal({
					title: '确定要删除吗?',
					success: async res => {
						if (res.confirm) {
							uni.showLoading();
							const res = await this.$myRequest({
								url: 'adoption/message/delete',
								method: 'delete',
								data: ids
							})
							if (res && res.code === 0) {
								this.getMessageList();
								uni.hideLoading();
							}
						}
					}
				})
			},
			navToPage(item) {
				if (item.isRead == 0) {
					//修改已读状态
					this.updateIsRead(item.id);
				}
				//跳转对应页面
				let url;
				switch (item.type) {
					case 1:
						url = '/pages/adoptionCage/adoptionCage';
						break;
					case 2:
						url = '/pages/myHarvest/myHarvest';
						break;
				}
				uni.navigateTo({
					url
				})
			}
		},
		onLoad() {
			this.getMessageList()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
		padding-top: 10%;
	}

	.message {
		width: 95%;
		margin-top: 2%;
		padding: 1%;
		border-radius: 20rpx;
		background-color: #ffffff;
		font-size: 35rpx;

		.message_head {
			display: flex;

			.message_time {
				width: 50%;
				margin-left: 30%;
				margin-right: 10%;
			}



			.tag {
				color: #FF8300;
			}
		}

		.message_body {
			display: flex;

			.message_icon {
				width: 70rpx;
				height: 70rpx;
				margin: 25rpx 10rpx 0 0;
			}

			.message_info {
				width: 450rpx;
			}

			.navBtn {
				width: 170rpx;
				font-size: 35rpx;
				height: 80rpx;
				background-color: #67C23A;
				color: white;
			}

			.delBtn {
				color: gray;
				width: 150rpx;
				font-size: 30rpx;
				height: 70rpx;
				margin-top: 20rpx;
			}
		}
	}

	.top {
		padding-top: 10rpx;
		padding-bottom: 15rpx;
		position: fixed;
		top: 0;
		width: 750rpx;
		z-index: 5;
		display: flex;
		background-color: white;

		.allReadButton {
			color: #ffffff;
			background-color: #00BFFF;
			border-radius: 5px;
			font-size: 30rpx;
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
		}

		.deleteBatchButton {
			color: #ffffff;
			background-color: #00BFFF;
			border-radius: 5px;
			font-size: 30rpx;
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
		}
	}
</style>
